<script setup lang="ts">
import {ref} from 'vue'
import navBar from '@/components/navBar.vue'

const goRecord = () => {
    uni.navigateTo({ url: '/pages/mypages/record' })
}
</script>

<template>
    <view class="page">
        <navBar message="充值" />
        <view @click="goRecord" class="record">充值记录</view>
        <view class="points">
            <text style="font-size: 80rpx;color: rgb(48,49,51);font-weight: 700;">45</text>
            <text>我的积分</text>
        </view>
        <view class="bottom">
            <view class="tip">请选择充值积分</view>
            <view class="points-item">
                <view>13积分</view>
                <view style="font-size: 28rpx;color: rgb(144,147,153);">￥68</view>
            </view>
            <view class="topup">
                <view class="pay">
                    <view class="pay-left">
                        <view class="price"><text style="font-size: 24rpx;">￥</text>68</view>
                        <view class="xiey">支付即同意<text style="color: red;">《协议》</text></view>
                    </view>
                    <button class="ver-pay">确认充值</button>
                </view>
                <view class="topup-bottom"></view>
            </view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
    .page{
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgb(255,205,39);
        .record{
            position: absolute;
            top: 216rpx;
            right: 32rpx;
            font-size: 30rpx;
            color: rgb(69,70,74);
        }
        .points{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            margin: 64rpx auto;
            font-size: 28rpx;
            color: rgb(69,70,74);
        }
        .bottom{
            width: 100%;
            height: 1000rpx;
            background-color: #fff;
            border-radius: 24rpx 24rpx 0 0;
            padding: 40rpx 32rpx;
            box-sizing: border-box;
            .tip{
                font-size: 32rpx;
                color: rgb(48,49,51);
                margin-bottom: 62rpx;
            }
            .points-item{
                display: inline-block;
                width: 332rpx;
                height: 154rpx;
                border-radius: 16rpx;
                background-color: rgb(246,248,251);
                padding: 32rpx;
                box-sizing: border-box;
                margin: 0 22rpx 24rpx 0;
                font-size: 32rpx;
                color: rgb(48,49,51);
                &:nth-child(2n){
                    margin: 0;
                }
            }
            .topup{
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                background-color: #fff;
                padding: 0 32rpx;
                box-sizing: border-box;
                .pay{
                width: 100%;
                height: 98rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .pay-left{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .price{
                        font-size: 40rpx;
                        color: rgb(255,161,0);
                    }
                    .xiey{
                        font-size: 24rpx;
                        color: rgb(144,147,153);
                    }
                    
                }
                .ver-pay{
                    width: 288rpx;
                    height: 88rpx;
                    background-color: rgb(255,205,39);
                    border-radius: 364rpx;
                    margin: 0;
                    font-size: 32rpx;
                    color: rgb(48,49,51);
                    font-weight: 500;
                    line-height: 88rpx;
                    text-align: center;
                }
                }
                .topup-bottom{
                    width: 100%;
                    height: 68rpx;
                }
            }
        }
    }
</style>